@import 'resets.less';
/* ---- reset ---- */
.reset();
@import 'base.less';
@import 'ui.less';
@import 'boxs.less';
@import 'grid.less';



/* 全局定义 */

@disable-filters: true;//打开ie滤镜
@using-ieclasses: true;//打开ie样式 

@theme_bg1: #fff;
@base-font-size: 12;
/* layout */

@columns: 25;
@column-width: 30;
@gutter-width: 10;

//@total-width: 100%;

.container{
	width:1000px;
	margin:0 auto;
	.clearfix;
}

/* setting */

/* 标题
-----------------------------------------*/
h1,h2,h3,h4,h5,h6,strong { 
	color:#000; 
}
h1,h2,h3,h4{ 
	font-weight: bold; 
}
h2,h3,h4 { 
	line-height: 18px; 
}
h1,h2 { 
	margin-bottom: 10px; 
}
h1 { 
	font-size: 30px; 
	line-height: 36px; 
}
h2 { 
	font-size: 24px; 
}
h3 { 
	font-size: 20px; 
}
h4 { 
	font-size: 16px; 
}
h5 { 
	font-size: 16px; 
}
h6 { 
	font-size: 14px; 
}
/* 段落
-----------------------------------------*/
p { 
	
	&.intro { 
		color: #888; 
		font-size: 16px; 
		line-height: 22px; 
		font-weight: normal; 
	}
	.page_content &{
		margin-bottom: 18px;
	}
}

	
/* 连接
-----------------------------------------*/
a{
	color: #2F549F;
	&:link,&:visited,&:active,a:focus{
		text-decoration: none;
	}
	&:hover{
		text-decoration: underline;
	}
}
/* 引用
-----------------------------------------*/
blockquote{ 
	background:#eee; 
	border-left:3px solid #ccc; 
	padding:5px 20px; 
	color:#666; 
	margin-left:3em; 
	line-height:22px;
}
/* 短语引用
----------------------------------------*/
cite{
	background:#ececec; 
	display:inline-block; 
	padding:0 3px; 
	border-radius:5px; 
	color:#000; 
	font-style:normal;
}
/* 特殊字符短语在页面上直接显示，例如发音[ae]
----------------------------------------*/
samp{ 
	display:inline-block; 
	background:#eee; 
}
/* 代码片段
-----------------------------------------*/
code{ 
	display:inline-block; 
	background:#eaeaea; 
	border-radius:5px; 
	color:#333; font:14px/20px  "Courier New", Courier, monospace; 
	white-space:pre; 
}
/* 缩写
-----------------------------------------*/
abbr{ 
	border-bottom:1px dashed #ccc;
}

/* 项目列表 
-----------------------------------------*/

ul { 
	list-style: none outside; 

	&.square,&.circle { 
		margin-left: 2em; 
		margin-bottom: 18px; 
	}
	&.square { 
		list-style: square outside; 
	}
	&.circle { 
		list-style: circle outside; 
	}

	ul{
		&.circle,&.square{
			margin-top: 4px; 
			margin-bottom: 5px;
		}
	}
}
ol { 
	margin-bottom: 18px; 
	list-style: decimal; 
	margin-left: 2.2em; 

	&.sosumi { 
		margin-left: 0; 
		padding-left: 2em; 
		*padding-left: 2.2em; 
	}
}


/* 弹出框
	------------------------*/
.win{
	.size(100%);
	.po_ab;
	left:0;
	top:0;
	z-index:1;
	
	.win_table{
		.po_ab;
		z-index: 9999;
		left: 50%;
		top: 50%;
		margin-left:-190px;
		margin-top:-116px;
		width: 380px;
		border:none;
		
		
		td{ border:none;
			&.tt_l,&.tt_c,&.tt_r,&.m_l,&.m_r,&.b_l,&.b_c,&.b_r{
				
			}
			&.tt_l,&.tt_r,&.b_l,&.b_r{}
			&.tt_c,&.b_c{}
			&.m_l,&.m_r{}
		}
	
	}
	
	
	.box{
		.winbox;
		
		.box_detail{
			min-height:40px;
			&.success{
				.detail{padding-left:70px;}
				.icon{.fl_l; .size(48px); margin:10px 0 0 15px; background:url(../img/succeed.png) no-repeat;}
			}
			&.info{
				.detail{padding-left:70px;}
				.icon{.fl_l; .size(48px); margin:10px 0 0 15px;  background:url(../img/warning.png) no-repeat;}
			}
			&.error{
				.detail{padding-left:70px;}
				.icon{.fl_l; .size(48px); margin:10px 0 0 15px;  background:url(../img/error.png) no-repeat;}
			}
			&.confirm{
				.detail{padding-left:70px;}
				.icon{.fl_l; .size(48px); margin:10px 0 0 15px;  background:url(../img/question.png) no-repeat;}
			}
			
			
		}
		
	}

	/* 遮罩
		-------------------------*/
	.mask{
		.po_ab;
		.size(100%);
		left:0;
		top:0;
		z-index:1998;
		background:#000;
		filter:alpha(opacity=50);
		-moz-opacity:0.5;opacity:0.5;
		text-align:center;
		display:table-cell!important; 
		vertical-align:middle!important;
		display:block;
	}
}

.fwin,{ .box-shadow(0 0 20px rgba(0,0,0,.2));border:1px solid #b7b7b7;

	.success,.error,.info,.confirm{padding: 20px 0 20px 70px; background-repeat: no-repeat; background-position:15px 10px ; line-height: 160%;font-size: 14px;}
	.error{background-image: url(../img/error.png);}  
	.info{background-image: url(../img/warning.png);}   
	.success{background-image: url(../img/succeed.png);} 
	.confirm{background-image:url(../img/question.png);}
	&table td{ }
	.tt_l,.tt_c,.tt_r,.m_l,.m_r,.b_l,.b_c,.b_r{overflow: hidden; background: #fff;border: none; /*background:#bbbbbb; filter:alpha(opacity=70); background:rgba(187, 187, 187, .7) !important;*/}
	.tt_l,.tt_r,.b_l,.b_r{width: 1px;height: 1px;}
	.tt_c,.b_c{height: 1px;}
	.m_l,.m_r{width: 1px;}
	.tt_l{}
	.tt_r{}
	.b_l{}
	.b_r{}
	
	.m_c{background: #FFF; position:relative;z-index: 1; zoom:1; display: block; border: none;
		.c{padding: 10px;border-top:1px solid #eee; border-bottom: 1px solid #eee;}
		.o{ padding: 10px; margin-bottom:0; height: 31px;text-align: right;  }
	}
	
	.altw{width: 350px; }
	
	.flb {
		height:25px; line-height:25px; font-size: 14px;color: #333;  font-weight:bold;text-align: center; color:#333;  background-color:#f7f7f7;
		em{
			font-weight:bold; font-style:normal;
			a{text-decoration: none;} 
		}
	 	span{
	 		color: #999; position: absolute;right:5px; top:-2px; font:bold 12px/15px '微软雅黑';
	 		a{
	 			color:#666;border:1px solid #b7b7b7; display:block;padding:2px 10px; text-decoration:none;border-radius:0 0 5px 5px;
	 			&:hover{background:#c00; border-color:#900; color:#fff;box-shadow:0 0 5px rgba(204, 0, 0,.5);}
	 		}
	 		
	 	}
	}

	.pns{
		background:#f7f7f7; 
		button{.ml_5;padding:2px 10px}
	}
		
}

/* artDialog 弹出框 */
.aui_outer{
	.box-shadow(0 0 20px rgba(0,0,0,.2));
	border:1px solid #b7b7b7;
	background: white;
}
.aui_titleBar{
	.po_re;
	width: 100%;
	.aui_title{
		.ws_hide;
		.pl_10;
		.pr_20;
		background:#f7f7f7;
		border-bottom:1px solid #b7b7b7;
	}
	a.aui_close{
		.po_ab;
		.border-radius(0 0 5px 5px);
		right:5px; 
		top:-1px; 
		font:bold 12px/15px '宋体';
		color:#666;
		border:1px solid #b7b7b7; 
		display:block;
		padding:2px 10px;
		outline:none; 
		cursor:pointer;
		&:hover,#user &:hover{
			text-decoration: none;
			background:#c00; border-color:#900; 
			color:#fff;
			.box-shadow(0 0 5px rgba(204, 0, 0,.5));
		}
		
	}
}
.aui_icon{
	vertical-align: middle;
	div{.size(48px);margin: 10px 0 10px 10px;}
} 
.aui_content.aui_state_full{
	display: block;
    height: 100%;
    margin: 0;
    padding: 0 !important;
    width: 100%;
}
.aui_footer{
	.aui_buttons{
		.pad10;
		.t_r;
		border-top:1px solid #DADEE5;
		background:#f7f7f7; 
		
		button{.ml_10;}
	}
}

/* --------------------------------------------------------------------- 
								用户中心
-----------------------------------------------------------------------*/
#user{
	/* 颜色配置 */
	@main_color			: #0090d2;
	@text_color			: #444;
	@main_bg			: #f6f6f6;
	@border_colors		: #e1e1e1;
	
	/* 基本配置 */
	font: 12px/25px Arial,'Lucida Grande','Microsoft YaHei','微软雅黑';
	color: @text_color;
	background:@theme_bg1 ;
	a{
		&:link,&:visited{ color: @main_color;}
		&:hover,&:active{ text-decoration: underline;}
	}

	input[type=email],
	input[type=number],
	input[type=password],
	input[type=tel],
	input[type=text],
	input[type=url],
	input[type=search],
	input[type=date]{
		.transition(box-shadow 0.2s ease-out 0.1s);
		.size(auto,30px);
		.txt_input(#333,white,1px,solid,@border_colors);
		.placeholder();
		line-height: 30px;
		font-family: Arial,"微软雅黑";
		padding: 0 5px;
		vertical-align: middle;
		margin-right: -1px;
		&:hover{
			.box-shadow(inset 1px 1px 2px rgba(0,0,0,.1));
			border-color:darken(@border_colors,10%);
			+ input[type=button],+ .right_tip{
				border-color: darken(@border_colors,10%);
			}
		}
		&:focus{
			.box-shadow(inset 1px 1px 2px rgba(0,0,0,.1));
			border-color: @main_color;
			+ input[type=button],+ .right_tip,+ .left_tip{
				color: white;
				background: @main_color;
				border-color: darken(@main_color,10%);
			}
		}
		&:disabled,&[disabled]{
			background: lighten(@border_colors,8%);
		}
		
	}

	input[type=file]{
		background: white;
	}

	select{
		.select;
		.size(auto,32px);
		padding: 4px 5px;
		font-family: Arial,"微软雅黑";
	}
	textarea{
		.txt_input(#333,white,1px,solid,@border_colors);
		font:12px/20px "微软雅黑",Arial, Helvetica, sans-serif;
		resize:vertical; vertical-align:top;
		padding: 5px 0 0 5px;
		&:hover{
			.box-shadow(inset 1px 1px 2px rgba(0,0,0,.1));
			border-color:darken(@border_colors,10%);

		}
		&:focus{
			.box-shadow(inset 1px 1px 2px rgba(0,0,0,.1));
			border-color: @main_color;
		}
		&:disabled,&[disabled]{
			background: lighten(@border_colors,8%);
		}
	}
	input[type=button],
	button[type=button],
	input[type=reset],
	button[type=reset],
	a.button{
		.button(@text_color,@main_bg,1px,solid,@border_colors);
		height: 32px;
		font-family: "微软雅黑";
		vertical-align: middle;
		padding: 0 10px;
		&:hover{
			.box-shadow(inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 2px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.29));
			.text-shadow;
			color: white;
			background: @main_color;
			border-color: darken(@main_color,10%);
			
		}
		&:active{
			.box-shadow(inset 0 0 7px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,1));
		}
	}
	input[type="submit"],
	button[type="submit"],
	button.aui_state_highlight,
	a.submit{
		.button(white,@main_color,1px,solid,darken(@main_color,10%));
		.border-radius(3px);
		.box-shadow(inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 2px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.29));
		.text-shadow(0 -1px 0 rgba(0,0,0,.3));
		font-weight: bold;
		height: 32px;
		font-family: "微软雅黑";
		vertical-align: middle;
		padding: 0 15px;
		&:hover{
			background: lighten(@main_color,5%);
		}
		&:active{
			.box-shadow(inset 0 0 7px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,1));	
		}
	}
	a.submit,
	a.button{line-height: 32px;}

	/* 表单行 */
	.form_row{
		.pt_5;
		.pb_5;
		font-size:1.2em;
		line-height:30px;
		/* 表单标签 */
		.form_label{
			.size(7em,30px);
			vertical-align: top;

		}
		/*  输入框右边的字段 */
		.right_tip{
			.pl_10;
			.pr_10;
			background: @main_bg;
			border:1px solid @border_colors;
		}
		/*  输入框左边的字段 */
		.left_tip{
			.pl_10;
			.pr_10;
			background: @main_bg;
			border-color: @border_colors;
			margin-right:-1px; 
		}
	}
	/* 浮动行 */
	.float_row{
		.detail{ padding-left: 7em;}
	}
	/* 表单分割线 */
	.form_line{
		margin:2em 0px 1.2em;
		border-color: lighten(@border_colors,5%);

	}
	/* 表单底部 */
	.form_footer{
		margin:0 0px 2em;
		padding-left: 9em;
	}
	/* 带图标表单提示共3种 */
	.form_tip{
		 .mt_20;
		 font-size:1.2em;
		.detail{padding-left:70px;}
		.icon{.fl_l;  margin-right: 15px;}
		
	}

	.pic_big{
		.size(150px);
	}
	.pic_middle{
		.size(100px);
	}
	.pic_small{
		.size(50px);
	}



/* 头部 */
	.header{
		.clearfix;
		.size(auto,50px);
		overflow: hidden;
		padding-top: 40px;
		background: rgba(255,255,255,.5);
		.logo{
			.column(8);
			h1{
				color: @text_color;
				display: inline;
				vertical-align: middle;
				font-size: 30px;
				line-height: 30px;
				margin-bottom: 0;
			}
			h2{
				.ml_20;
				color: @main_color;
				display: inline;
				vertical-align: middle;
				line-height: 30px;
				font-weight: normal;
				margin-bottom: 0;
			}
		}
		.search{
			.column(9);
			input[type=search]{
				.size(280px,30px);
			}
		}

		
		.login{
			.column(8);
			.t_r;
			a{
				.size(auto,30px);
				font-size: 14px;
				display: inline-block;
				padding: 0 10px;
				line-height: 30px;
			}
			
		}
	}
/* 主导航 */
	.primary_nav{
		.clearfix;
		.border-radius(0);
		background: white;
		background: rgba(255,255,255,.5);
		border:none;
		border-bottom:5px solid @main_color;
		font-size: 14px;
		ul li{
			.mr_10;
			a{
				.border-radius(0);
				border-width: 0;
				margin: 0;
				padding: 4px 15px;
				color: @text_color;
				&:hover,&.selected{
					background: @main_color;
					color: white;
					text-decoration: none;
				}
				&.selected{
					font-weight: bold;
				}
			}
		}

	}
/* 顶部栏目 */
	.topbar{

		@topbar_bg			: #f5f5f5;
		@topbar_color		: #666;
		@topbar_border		: #e4e4e4;
		@topbar_link_color	: #666;

		.clearfix;
		.size(100%,30px); 
		.po_ab;
		top: 0;
		left: 0;
		background: @topbar_bg;
		color: @topbar_color;
		border-width: 0 0 1px 0; 
		border-style: solid; 
		border-color: @topbar_border; 
		a{
			.size(auto,30px);
			z-index: 1;
			color:@topbar_link_color;
			display: inline-block;
			line-height: 30px;
			vertical-align: middle;
			.arrow{
				.arrow_b;
				.po_ab;
				right: 0;
				top:48%;
				border-color: @topbar_bg;
				border-top-color: @topbar_color;
				border-width: 3px;
				margin: 0;
			}

			&:hover{
				color: @main_color;
			}
		}

		ul li{ 
			.fl_l;
			display: inline;
			&:last-child{
				.hd-menu{
					left:auto;
					right:0;
				}
			}
		}
		/* 顶部菜单 */
		.tp-menu{
			.po_re;
			z-index: 1;

			.selected-item{
				.ws_hide;
				a{
					.po_re;
					.pl_5;
					.pr_10;
				}
				
			}
			.hd-menu{
				.po_ab;
				.size(80px,auto);
				.hidden;
				.box-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
				.transition(all 0.2s ease-out 0.1s);
				left: 0;
				top:30px;
				z-index: 500;
				background: @topbar_bg;
				border: 1px solid @topbar_border;
				a{
					.block;
					.ws_hide;
					.pl_10;
					.pr_10;
					&:hover{
						background: lighten(@topbar_bg,10%);
					}
				}
			}
			&:hover{
				.hd-menu{.block;}
				a{
				color: @main_color;
				.arrow{
					.arrow_t;
					border-color: @topbar_bg;
					border-bottom-color: @topbar_color;
					border-width: 3px;
					margin: 0;
					vertical-align: middle;
					top:40%;
				}
			}
			}

		}
		/* 顶部网页链接 */
		.for_website{
			.fl_l;
			.clearfix;
			ul li{
				.mr_10;
			}
		}
		/* 顶部用户链接 */
		.for_user{
			.fl_r;
			.clearfix;
			ul li{
				.ml_10;
			}
		}
	}

/* 内容部分 */	
	.wrapper{
		.pt_10;
		.aside{
			.column(5);
			/* 页面副导航 */
			.minor_nav ul{
				&.nav_group{
					.border-radius(0);
					border-color: @border_colors;
					background: @main_bg;
					li a{
						background: @main_bg;
						padding: 8px 10px;
						border-color: white white @border_colors;
						&:hover{
							background: white;
							text-decoration: none;
						}
						&.selected{
							padding-left: 7px;
							margin:-1px -1px 0;
							border-width: 1px 1px 1px 5px ;
							border-style: solid;
							border-color: @border_colors @border_colors @border_colors @main_color;
							background: white;
							
						}
						&.sp_link{
							&:hover{
								background: @main_color;
								color: white;
								border-color: darken(@main_color,10%);

								strong{
					  				color:white; 
					  			}
					  		}
						}
					}
				}
			}
		}
		.content{
			.column(20);
			.toolbar{
				.clearfix;
				.mb_10;
				.actions{
					.fl_l;
					.mr_10;
					display: inline;

				}
				&.bottom{
					.mt_10;
				}
				
			}
			.box{
				.whitebox;
				.box_nav{
					ul li{
						a{
							border-right-color:@border_colors;
							color: @text_color;
							&:hover{
								color: @main_color;
								text-decoration: underline;
							}
						}
						&.selected{
							border-bottom: 2px solid @main_color;
							a{ 
								font-weight:bold;
								color:@main_color;
								&:hover{
									text-decoration: none;
								}
							}
						}
						&:last-child {
							a{
								border-right:none;
							}
						}

					}
				}
			}
			/* 头像布局 */
			.avatar_show{
				.column(4);
			}
			.avatar_upload{
				.column(15);
			}
		}
	}
	/* 翻页 */
	.page{
		.clearfix;
		.fl_r;
		background: white;
		border:1px solid @border_colors;
		padding:0;
		.stats{ border:none;}

	    a,span{ display:inline-block; padding: 0 12px; line-height: 30px; height: 30px;}
		a     {
		    	&:hover 				   { background:lighten(@main_color, 50%); }
		    	&.selected,&.selected:hover{ background:@main_color; color:white; text-decoration:none;}
		    }
	}
	/* 数据列表 */
	.data_list{
		border:1px solid @border_colors;
		.data_table{ 
			width:100%;border:none;
			tr{
				
				td{border-left:none;}
			}
			
			thead{ 
				background:#f6f6f6; color:#333;
				font-size: 1.2em;
				th{ text-align: left; border-bottom:1px solid @border_colors;}
				tr{
					background:#f6f6f6;
					&.hover,&:hover{ background:#f6f6f6;}
				}
			}
			
			tbody{ 
				background:#fff; color:#333;
				.item_action{
					visibility: hidden;
					a{ 
						display: inline-block; border-right: 1px solid @border_colors; line-height: 1em; height: 1em;.pr_5;
						&:last-child {
							border-right:none;
						}
					}
				}
				tr{
					td{  
						border-bottom:1px solid @border_colors;padding-bottom: 0; padding-top:0; vertical-align: top; color:lighten(@text_color,20%); 
						.item_pic{
							.size(50);
							.fl_l;
							.mt_5;
							.mr_5;
							.mb_5;
						}
					}
					.title{ font-size: 1.2em;}
					&.odd,&:nth-child(odd){ background:white;}
					&.even,&:nth-child(even){background:#f8f8f8;}
					&.hover,&:hover{
						background:#fffecf;
						.item_action{
							visibility: visible;
						}
						td{
							color: @text_color;
						}
						.money{
							color:spin(@main_color, 180);
						}
					}
					&.nocheck{
						td{ font-weight: bold;}
					}

					
				}

			}
		}
	}

	

	/* 账号绑定图标 */
	.bind{
		.icon{.size(16px); display: inline-block; vertical-align: middle; background: url(../img/share_ico.png) no-repeat;}
		.sina .icon{background-position:0 -96px;}
		.ten .icon{background-position:0 -144px;}
		.qq .icon{background-position:0 -2001px;}
		.douban .icon{background-position:0 -560px;}
		.renren .icon{background-position:0 -160px;}
		.qzone .icon{background-position:0 -64px;}
		.taobao .icon{background-position:0 -208px;}
		.netease .icon{background-position:0 -128px;}
		.sohu .icon{background-position:0 -112px;}
		.alipay .icon{background-position:0 -2017px;}
		a{.ml_10;}
	}

	/* 账户首页 */
	.user_avatar{
		.fl_l;
		display: inline;
		text-align: center;
		background: @main_bg;
		.box-shadow(0 0 5px rgba(0,0,0,.2));
		img{
			display: block;
		}
	}
	.about_user{
		.clearfix;
		font-size: 14px;
		padding-left: 170px;
		.money{
			color:spin(@main_color, 180);
		}
		span{
			.mr_20;
			display: inline-block;
		}
		img{
			vertical-align: middle;
		}
		p{
			.mb_5;
			height: 30px;
		}
	}

	.list_pic_view{
		li{
			.col5;
		}
	}

}